<template>
  <div>
    <section class="container">
      <nav class="tab">
        <a @click="hasAccount = true" :class="{active:hasAccount}" href="javascript:;">
          <i class="iconfont icon-bind" />
          <span>已有小兔鲜账号，请绑定手机</span>
        </a>
        <a @click="hasAccount = false" :class="{ active: !hasAccount }" href="javascript:;">
          <i class="iconfont icon-edit" />
          <span>没有小兔鲜账号，请完善资料</span>
        </a>
      </nav>
      <div class="tab-content" v-if="hasAccount">
        <CallbackBind :nickname="nickname" :imgHeader="imgHeader" :openid="openid" @sui="sui"/>
      </div>
      <div class="tab-content" v-else>
        <CallbackPatch :openid="openid" @sui="sui" />
      </div>
    </section>
  </div>
</template>


<script>
import CallbackBind from './CallbackBind.vue'
import CallbackPatch from "@/views/login/LoginPatch.vue"
import qc from "qc"
import { qqApi } from '@/Api/loginApi'
export default {
  components: { CallbackBind, CallbackPatch },
  data() {
    return {
      hasAccount: true,
      nickname: '',
      imgHeader: '',
      openid: ""
    }
  },
  mounted() {
    this.checkqq()
  },
  methods: {
    checkqq() {
      // 获取用户的唯一表示
      // qc.Login.check表示检查你是否同意qq已经登录    true打包已经登录   false代表没有登录
      if (qc.Login.check()) {
        //  qq登陆成功之后检查账号是否已经被注册
        qc.Login.getMe((openid) => {
          this.openid = openid
          // 调用接口检查openid是否在本网站已经被注册过了
          qqApi(openid).then((res) => {
            console.log(res);
            let { id, account, avatar, nickname, token } = res.result
            this.$store.commit("user/setUser", { id, account, avatar, nickname, token })
            this.$router.push("/")
          }).catch(() => {
            // 第三方登录失败
            // 获取当前的用户信息 展示在页面
            qc.api("get_user_info").success(res => {
              console.log(res);
              this.nickname = res.data.nickname
              this.imgHeader = res.data.figureurl
            })
          })
        })
      }
    },
    sui () {
      this.hasAccount =!this.hasAccount
    }
  },
}
</script>


<style scoped lang='scss'>
@import '@/assets/css/variables.scss';

.container {
  padding: 25px 0;
}

.tab {
  background: #fff;
  height: 80px;
  padding-top: 40px;
  font-size: 18px;
  text-align: center;

  a {
    color: #666;
    display: inline-block;
    width: 350px;
    line-height: 40px;
    border-bottom: 2px solid #e4e4e4;

    i {
      font-size: 22px;
      vertical-align: middle;
    }

    span {
      vertical-align: middle;
      margin-left: 4px;
    }

    &.active {
      color: $xtxColor;
      border-color: $xtxColor;
    }
  }
}

.tab-content {
  min-height: 600px;
  background: #fff;
}
</style>